<header>

    <!-- Nav Bar -->
    <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
    <div class="container">
      {% if page.title != "about" %}
      <a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl | prepend: site.url }}/">
       {% if site.title == "blank" %}<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }}  {{ site.last_name }}{% else %}{{ site.title }}{% endif %}
      </a>
      {% elsif site.enable_navbar_social %}
        <!-- Social Icons -->
        <div class="navbar-brand social">
          {% include social.html %}
        </div>
      {% endif %}
      <!-- Navbar Toggle -->
      <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto flex-nowrap">
          <!-- About -->
          <li class="nav-item {% if page.title == 'about' %}active{% endif %}">
            <a class="nav-link" href="{{ '/' | relative_url }}">
              About
              {% if page.title == "about" %}
                <span class="sr-only">(current)</span>
              {% endif %}
            </a>
          </li>
          {% if site.blog_name %}
          <!-- Blog -->
          <li class="nav-item {% if page.url contains 'blog' %}active{% endif %}">
            <a class="nav-link" href="{{ '/blog/' | relative_url }}">
              Blog
              {% if page.title == "blog" %}
              <span class="sr-only">(current)</span>
              {% endif %}
            </a>
          </li>
          {% endif %}
          <!-- Other pages -->
          {% assign sorted_pages = site.pages | sort: "importance" %}
          {% for p in sorted_pages %}
          {% if p.nav and p.autogen == nil %}
          {% if p.dropdown %}
          <li class="nav-item dropdown {% if page.title == p.title %}active{% endif %}">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ p.title }}
                {% if page.title == p.title %}
                <span class="sr-only">(current)</span>
                {% endif %}
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              {% for child in p.children %}
              {% if child.title == 'divider' %}
                <div class="dropdown-divider"></div>
              {% else %}
                <a class="dropdown-item" href="{{ child.permalink | relative_url }}">{{ child.title }}</a>
              {% endif %}
              {% endfor %}
              </div>
          </li>
          {% else %}
          <li class="nav-item {% if page.title == p.title %}active{% endif %}">
              <a class="nav-link" href="{{ p.url | relative_url }}">
                {{ p.title }}
                {% if page.title == p.title %}
                <span class="sr-only">(current)</span>
                {% endif %}
              </a>
          </li>
          {% endif %}
          {% endif %}
          {% endfor %}
          <!-- <li class="nav-item">
              <a class="nav-link" target="_blank" href="/assets/pdf/maharshi-resume.pdf">
                Resumé
              </a>
          </li> -->
          {% if site.enable_darkmode %}
            <div class = "toggle-container">
              <a id = "light-toggle">
                  <i class="fas fa-moon"></i>
                  <i class="fas fa-sun"></i>
              </a>
            </div>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>

</header>
